<template>
  <div v-loading="loading">
    <div class="tra_home" v-if="active === '1'">
      <div class="tra_main">
        <div class="carousel_top">
          <el-carousel trigger="click" height="350px">
            <el-carousel-item v-for="item in srcList" :key="item" indicator-position="none">
              <img :src="item" alt="" style="width: 100%; height: 100%" />
            </el-carousel-item>
          </el-carousel>
          <div class="userInfo">
            <div class="userInfo_t">
              <img :src="loginInfo.avatar" alt="" v-if="loginInfo.avatar" />
              <div class="avaterName" v-else>{{ loginInfo.nickName[0] }}</div>
              <div class="name">{{ loginInfo.nickName }}</div>
              <div class="dept">{{ loginInfo.dept.deptName }}</div>
            </div>
            <div class="userInfo_b">
              <div>
                <span>0<span>秒</span></span>
                <span>今日学习</span>
              </div>
              <div>
                <span>0<span>秒</span></span>
                <span>累计学习</span>
              </div>
            </div>
            <el-button type="primary" style="background: #2f54eb; border: none; width: 100%"
              @click="setActiveName('3')">培训记录
            </el-button>
          </div>
        </div>
        <div class="train_plan">
          <div class="title">
            <span><span></span><span>培训计划</span></span>
            <el-button type="primary" round size="mini" style="background: #e5eaff; color: #2f54eb"
              @click="setActiveName('2')">全部<i class="el-icon-arrow-right"></i></el-button>
          </div>
          <el-tabs v-model="trainPlanActiveName" @tab-click="handleClick" v-if="planListOption.length">
            <el-tab-pane :label="item.planName" :name="item.id" v-for="item in planListOption"
              :key="item.id"></el-tab-pane>
          </el-tabs>
          <div class="train_plan_detail" v-if="planListOption.length">
            <div style="display: flex; width: 100%">
              <div class="train_plan_peo">
                <span>起止时间：</span>{{
                  `${initDate(
                    currentPlan.startTime,
                    "YYYY-MM-DD"
                  )}&nbsp;至&nbsp;${initDate(
                    currentPlan.endTime,
                    "YYYY-MM-DD"
                  )}`
                }}
              </div>
              <div class="train_plan_peo">
                <span>培训类型：</span>&nbsp;{{
                  currentPlan.trainType === "1"
                  ? "线上培训"
                  : currentPlan.trainType === "2"
                    ? "线下培训"
                    : "无培训"
                }}
              </div>
              <div class="train_plan_peo" v-if="currentPlan.trainType === '2'">
                <span>负责人：</span><span style="margin-right: 20px">{{
                  currentPlan.offlineTrainDirector
                }}</span>
              </div>
              <div class="train_plan_peo" v-if="currentPlan.trainType === '2'">
                <span>讲师：</span><span style="margin-right: 20px">{{
                  currentPlan.offlineTrainLecturer
                }}</span>
              </div>
              <div class="train_plan_peo" v-if="currentPlan.trainType === '2'">
                <span>地点：</span><span style="margin-right: 20px">{{
                  currentPlan.offlineTrainLocation
                }}</span>
              </div>
            </div>
            <!-- <div><span>考试类型：</span>&nbsp;{{currentPlan.examType === '1' ? '线上考试' : currentPlan.examType === '2' ? '线下考试' : '无考试'}}</div> -->
            <!-- <el-button
              type="warning"
              style="background: #f19811; width: 59px; height: 27px"
              size="mini"
              @click="handlePlanDetail"
              >详情</el-button
            > -->
          </div>
          <div class="train_plan_main">
            <div v-if="currentPlan.trainType !== '2' && courseList.length" class="train_plan_item_first"
              @click="handleDetail(courseList[0], '2', 'plan')">
              <div class="coverImg" v-if="courseList[0]">
                <img :src="getImg(courseList[0].picture)" alt="" />
              </div>
              <div class="item_info" v-if="courseList[0]">
                <div>{{ courseList[0].title }}</div>
                <div>讲师：{{ courseList[0].lector }}</div>
                <!-- <div><i class="el-icon-user"></i><span>72人参与</span></div> -->
              </div>
            </div>
            <div class="train_plan_list" v-if="currentPlan.trainType !== '2' && courseList.length">
              <div class="train_plan_item" v-show="index !== 0 && index <= 6" @click="handleDetail(item, '2', 'plan')"
                v-for="(item, index) in courseList" :key="item.id" style="height: 50%">
                <div class="coverImg">
                  <img :src="getImg(item.picture)" alt="" />
                </div>
                <div class="item_info">{{ item.title }}</div>
              </div>
            </div>
            <div style="margin: 0 auto" v-if="currentPlan.trainType === '2' || !courseList.length">
              <div class="planNoData">
                <img src="../../../assets/images/planNoData.png" alt="" />
                <span>{{
                  !planListOption.length ? "暂无培训" : "暂无课程"
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="my_exam">
          <div class="title">
            <span><span></span><span>我的考试</span></span>
            <el-button type="primary" round size="mini" style="background: #ffe7ee; color: #ff3271"
              @click="setActiveName('4')">全部<i class="el-icon-arrow-right"></i></el-button>
          </div>
          <el-tabs v-model="examActiveName" @tab-click="handleClickExam" v-if="planListOptionExam.length">
            <el-tab-pane :label="item.planName" :name="item.id" v-for="item in planListOptionExam"
              :key="item.id"></el-tab-pane>
          </el-tabs>
          <div class="train_plan_detail" v-if="planListOptionExam.length">
            <div style="display: flex; width: 100%">
              <div class="train_plan_peo">
                <span>起止时间：</span>{{
                  `${initDate(
                    currentPlanExam.startTime,
                    "YYYY-MM-DD"
                  )}&nbsp;至&nbsp;${initDate(
                    currentPlanExam.endTime,
                    "YYYY-MM-DD"
                  )}`
                }}
              </div>
              <div class="train_plan_peo">
                <span>培训类型：</span>&nbsp;{{
                  currentPlanExam.trainType === "1"
                  ? "线上培训"
                  : currentPlanExam.trainType === "2"
                    ? "线下培训"
                    : "无培训"
                }}
              </div>
              <div class="train_plan_peo" v-if="currentPlanExam.trainType === '2'">
                <span>负责人：</span><span style="margin-right: 20px">{{
                  currentPlanExam.offlineTrainDirector
                }}</span>
              </div>
              <div class="train_plan_peo" v-if="currentPlanExam.trainType === '2'">
                <span>讲师：</span><span style="margin-right: 20px">{{
                  currentPlanExam.offlineTrainLecturer
                }}</span>
              </div>
              <div class="train_plan_peo" v-if="currentPlanExam.trainType === '2'">
                <span>地点：</span><span style="margin-right: 20px">{{
                  currentPlanExam.offlineTrainLocation
                }}</span>
              </div>
            </div>
          </div>
          <div class="my_exam_main" v-if="examList.length">
            <div class="my_exam_item" v-for="(item, index) in examList" :key="item.taskId" v-show="index < 3">
              <div>
                <i class="el-icon-s-order"></i>
                <span>{{ item.name }}</span>
              </div>
              <div>
                <i class="el-icon-time"></i>
                <div>
                  考试时间：
                  <span>{{
                    item.startTime && item.endTime
                    ? item.startTime
                      ? initDate(item.startTime, "YYYY-MM-DD HH:mm:ss")
                      : "--" + " 至 " + item.endTime
                        ? initDate(item.endTime, "YYYY-MM-DD HH:mm:ss")
                        : "--"
                    : "随时考"
                  }}</span>
                </div>
              </div>
              <div>
                <div>
                  <i class="el-icon-document"></i>
                  <div>
                    考试总分：
                    <span>{{ item.fraction }}</span> 分
                  </div>
                </div>
                <div>
                  <i class="el-icon-trophy"></i>
                  <div>
                    通过分数：
                    <span>{{ item.passFraction }}</span> 分
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <i class="el-icon-alarm-clock"></i>
                  <div>
                    考试状态：
                    <span>{{ item.status === "1" ? "已考试" : "未考试" }}</span>
                  </div>
                </div>
                <div>
                  <i class="el-icon-paperclip"></i>
                  <div>
                    考试得分：
                    <span>{{ item.status === "1" ? item.score : "--" }}</span>
                  </div>
                </div>
              </div>

              <div>
                <el-button type="primary" class="begin_exam_btn" style="background: #2f54eb; border: none"
                  @click="handleDetail(item, '3', 'exam')" :disabled="item.status === '1'">{{ item.status === "1" ? "已考试"
                    : "开始考试" }}</el-button>
              </div>
            </div>
          </div>
          <div style="margin: 0 auto" v-else>
            <div class="planNoData">
              <img src="../../../assets/images/planNoData.png" alt="" />
              <span>暂无考试 </span>
            </div>
          </div>
        </div>
        <div class="curriculum_center">
          <div class="title">
            <span><span></span><span>课程中心</span></span>
            <el-button type="primary" round size="mini" style="background: #c2fffe; color: #16b7b4"
              @click="setActiveName('5')">全部<i class="el-icon-arrow-right"></i></el-button>
          </div>
          <div class="curriculum_list" v-if="courseCenterList.length">
            <div class="curriculum_item" @click="handleDetail(item, '2', 'lesson')"
              v-for="(item, index) in courseCenterList" v-show="index <= 7" :key="item.id">
              <div class="coverImg">
                <img :src="getImg(item.picture)" alt="" />
              </div>
              <div class="item_info">
                <span style="margin-left:5px">{{ item.title }}</span>
                <div>
                  <span><i class="el-icon-user"></i><span>{{ item.joinCount }}人参与</span></span>
                  <!-- <span style="background:#ff9329;color:#fff;padding:2px 5px;border-radius: 4px;">{{ item.category_title }}</span> -->
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex; justify-content: center" v-else>
            <div class="planNoData">
              <img src="../../../assets/images/planNoData.png" alt="" />
              <span>暂无课程</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Courselist v-if="active === '2'" :goBack="handleDetail" :planId="courseware.planId" :courseId="courseware.courseId"
      :lesson="courseware.lesson" :isCourseCenter="true" />
    <BeginExam v-if="active === '3'" :goBack="handleDetail" :clickExamObj="clickExamObj" />
    <PlanDetail v-if="dialogVisible" :dialogVisible="dialogVisible" :handleClose="handleClose" />
  </div>
</template>

<script>
import Courselist from "@/views/trainingCenter/components/courselist";
import BeginExam from "@/views/trainingCenter/components/beginExam";
import PlanDetail from "@/views/trainingCenter/components/planDetail";
import { mapGetters } from "vuex";
import {
  planList,
  courseListApi,
  courseCenter,
  examList,
} from "@/api/trainingCenter";
import moment from "moment";
export default {
  components: {
    Courselist,
    BeginExam,
    PlanDetail,
  },
  props: {
    setActiveName: {
      type: Function,
      default: () => { },
    },
  },
  computed: {
    loginInfo: {
      get() {
        return this.$store.state.user.loginInfo;
      },
    },
    selectedList() {
      return this.settingAppList?.length
        ? this.settingAppList
        : this.settingAppListCopy;
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      planListOption: [], // 计划列表
      currentPlan: {}, // 当前计划
      courseList: [], // 计划课程列表
      courseCenterList: [], // 课程中心列表
      currentPlanExam: {}, // 当前考试计划
      examActiveName: "1",
      planListOptionExam: [],
      clickExamObj: {},
      examList: [],
      srcList: [
        require("../../../assets/images/banner1.png"),
        require("../../../assets/images/banner2.png"),
      ],
      trainPlanActiveName: "1",
      active: "1",
      courseware: {
        planId: "",
        courseId: "",
        lesson: {},
      },
    };
  },
  async mounted() {
    this.loading = true;
    await this.getPlanList();
    await this.getPlanListExam();
    await this.getCourseCenterList();
    this.loading = false;
    console.log(this.loginInfo);
  },
  methods: {
    // 获取课程中心列表
    async getCourseCenterList() {
      const res = await courseCenter();
      this.courseCenterList = res.data?.list || [];
    },
    // 获取计划下考试列表
    async getExamList() {
      if (!this.currentPlanExam.id) return;
      const res = await examList(this.currentPlanExam.id);
      this.examList = res?.data || [];
    },
    // 获取计划列表
    async getPlanList() {
      const res = await planList({ type: "1" });
      this.planListOption = res.data || [];
      this.currentPlan = res.data?.[0] || {};
      this.trainPlanActiveName = res.data?.[0]?.id;
      await this.getCourseListApi();
    },
    // 获取开始计划列表
    async getPlanListExam() {
      const res = await planList({ type: "2" });
      this.planListOptionExam = res.data || [];
      this.currentPlanExam = res.data?.[0] || {};
      this.examActiveName = res.data?.[0]?.id;
      await this.getExamList();
    },
    // 点击计划
    async handleClick(e) {
      this.currentPlan = this.planListOption.filter(
        (item) => item.id === e._props.name
      )?.[0];
      if (this.currentPlan.trainType === "1") {
        await this.getCourseListApi();
      }
    },
    // 点击考试计划
    async handleClickExam(e) {
      this.currentPlanExam = this.planListOption.filter(
        (item) => item.id === e._props.name
      )?.[0];
      await this.getExamList();
    },
    async getCourseListApi() {
      if (!this.currentPlan.id) return;
      const res = await courseListApi(this.currentPlan.id);
      this.courseList = res?.data || [];
    },
    handleDetail(row, type, flag) {
      if (flag === "plan") {
        this.courseware.courseId = row.id;
        this.courseware.planId = this.currentPlan.id;
        this.courseware.lesson = row;
      } else if (flag === "lesson") {
        this.courseware.courseId = row.id;
        this.courseware.planId = "";
        this.courseware.lesson = row;
      } else if (flag === "exam") {
        this.clickExamObj = row;
      }
      this.active = type;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handlePlanDetail() {
      this.dialogVisible = true;
    },
    initDate(date, format) {
      return moment(date).format(format);
    },
    getImg(data) {
      let img = undefined;
      if (!!data) {
        img = JSON.parse(data);
      }
      if (img?.length) {
        return img[0].url;
      }
      return require("../../../assets/images/banner1.png");
    },
  },
};
</script>

<style lang="scss" scoped>
.tra_home {
  display: flex;
  justify-content: center;
  background: url(../../../assets/images/tra_bg.png) no-repeat 100% 100%;
  background-position: top left;
  padding-bottom: 30px;

  .tra_main {
    width: 1192px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;

      ::v-deep .el-button--primary {
        border: none;
      }

      &>span {
        display: flex;
        align-items: center;

        & span:nth-of-type(1) {
          display: inline-block;
          width: 3px;
          height: 16px;
          background: #2f54eb;
          margin-right: 8px;
        }

        & span:nth-of-type(2) {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
      }
    }

    .carousel_top {
      margin-top: 26px;
      display: flex;
      width: 100%;

      ::v-deep .el-carousel {
        width: calc(100% - 232px);
      }

      .userInfo {
        width: 232px;
        margin-left: 10px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 28px 38px 28px;
        box-shadow: 0px 0px 8px 0px rgba(22, 32, 47, 0.11);
        border-radius: 10px;

        .userInfo_t {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            margin-bottom: 14px;
          }

          .avaterName {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: #1890ff;
            color: #fff;
            line-height: 55px;
            text-align: center;
            font-size: 20px;
            margin-bottom: 14px;
          }

          .name {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
          }

          .dept {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
          }
        }

        .userInfo_b {
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-top: 40px;
          margin-bottom: 40px;

          &>div {
            display: flex;
            flex-direction: column;

            &>span:nth-of-type(1) {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #2f54eb;

              span {
                margin-left: 2px;
                font-size: 14px;
              }
            }

            &>span:nth-of-type(2) {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              margin-top: 10px;
            }
          }
        }
      }
    }

    .train_plan {
      .train_plan_detail {
        background: #2f54eb;
        border-radius: 0 6px 6px 6px;
        display: flex;
        padding: 12px 13px;
        color: #fff;
        font-size: 14px;
        align-items: center;
        justify-content: space-between;
        margin-top: -2px;

        div {
          margin-right: 50px;
        }

        .train_plan_peo {
          width: 30%;
          // overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          height: 19px;
        }
      }

      ::v-deep .el-tabs__header {
        margin: 0;
      }

      ::v-deep .el-tabs__nav-wrap::after {
        display: none;
      }

      ::v-deep .el-tabs__active-bar {
        display: none;
      }

      ::v-deep .is-active {
        background: #2f54eb;
        color: #fff;
        border-radius: 6px 6px 0 0;
        position: relative;
      }

      ::v-deep .is-active::after {
        content: "";
        position: absolute;
        background: radial-gradient(circle at 100% 0,
            transparent 17px,
            #2f54eb 20px);
        width: 20px;
        height: 20px;
        bottom: 0;
        right: -18px;
      }

      // ::v-deep #tab-2.is-active::before ,::v-deep #tab-3.is-active::before{
      //   content: "";
      //   position: absolute;
      //   background: radial-gradient(
      //     circle at 0 0,
      //     transparent 17px,
      //     #2f54eb 20px
      //   );
      //   width: 20px;
      //   height: 20px;
      //   bottom: 0;
      //   left: -18px;
      // }
      ::v-deep .el-tabs__item {
        padding: 0 20px;
      }

      // ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(4) {
      //   padding-right: 20px;
      // }
      .train_plan_main {
        display: flex;
        margin-top: 12px;

        .planNoData {
          padding: 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          span {
            font-weight: 500;
            font-size: 12px;
            color: #bbbbbb;
            line-height: 48px;
          }
        }

        .train_plan_item_first {
          width: 480px;
          cursor: pointer;
          padding: 10px;
          background: #fff;
          box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.07);
          border-radius: 10px;
          margin-right: 10px;

          &:hover img {
            transform: scale(1.1);
          }

          .coverImg {
            height: 261px;
            width: 100%;
            overflow: hidden;
            border-radius: 10px;

            img {
              width: 100%;
              height: 100%;
              transition: 1000ms ease all;
            }
          }

          .item_info {
            padding: 20px 20px 0 20px;
            height: 112px;
            width: 100%;
            background: url(../../../assets/images/train_plan_item_first_bg.png) no-repeat 100% 100%;

            &>div:nth-of-type(1) {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
              margin-bottom: 17px;
            }

            &>div:nth-of-type(2) {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 12px;
              color: #666666;
              margin-bottom: 21px;
            }

            &>div:nth-of-type(3) {
              display: flex;
              align-items: center;
              font-family: Microsoft YaHei;
              color: #999999;
              font-weight: 400;

              ::v-deep .el-icon-arrow-right {
                font-size: 11px;
              }

              span {
                font-size: 11px;
                margin-left: 3px;
              }
            }
          }
        }

        .train_plan_list {
          display: flex;
          flex-wrap: wrap;
          width: calc(100% - 480px);

          .train_plan_item {
            width: calc((100% - 20px) / 3);
            background: #fff;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
            border-radius: 6px;
            padding: 10px;
            cursor: pointer;

            &:nth-of-type(1),
            &:nth-of-type(2),
            &:nth-of-type(3) {
              margin-bottom: 10px;
            }

            &:nth-of-type(1),
            &:nth-of-type(2),
            &:nth-of-type(4),
            &:nth-of-type(5) {
              margin-right: 10px;
            }

            &:hover img {
              transform: scale(1.1);
            }

            .item_info {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 12px;
              color: #333333;
              line-height: 20px;
              padding-top: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .coverImg {
              width: 100%;
              height: 125px;
              overflow: hidden;
              border-radius: 10px;

              img {
                width: 100%;
                height: 100%;
                transition: 1000ms ease all;
              }
            }
          }
        }
      }
    }

    .my_exam {
      .planNoData {
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        span {
          font-weight: 500;
          font-size: 12px;
          color: #bbbbbb;
          line-height: 48px;
        }
      }

      .train_plan_detail {
        background: #2f54eb;
        border-radius: 0 6px 6px 6px;
        display: flex;
        padding: 12px 13px;
        color: #fff;
        font-size: 14px;
        align-items: center;
        justify-content: space-between;
        margin-top: -2px;

        div {
          margin-right: 50px;
        }

        .train_plan_peo {
          width: 30%;
          white-space: nowrap;
          text-overflow: ellipsis;
          height: 19px;
        }
      }

      ::v-deep .el-tabs__header {
        margin: 0;
      }

      ::v-deep .el-tabs__nav-wrap::after {
        display: none;
      }

      ::v-deep .el-tabs__active-bar {
        display: none;
      }

      ::v-deep .is-active {
        background: #2f54eb;
        color: #fff;
        border-radius: 6px 6px 0 0;
        position: relative;
      }

      ::v-deep .is-active::after {
        content: "";
        position: absolute;
        background: radial-gradient(circle at 100% 0,
            transparent 17px,
            #2f54eb 20px);
        width: 20px;
        height: 20px;
        bottom: 0;
        right: -18px;
      }

      ::v-deep .el-tabs__item {
        padding: 0 20px;
      }

      .my_exam_main {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        .my_exam_item {
          background: #ffffff;
          box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.05);
          border-radius: 10px;
          width: 390px;
          padding: 25px;
          cursor: pointer;

          &:nth-of-type(1),
          &:nth-of-type(2) {
            margin-right: 10px;
          }

          &>div {
            display: flex;
            align-items: center;
          }

          [class^="el-icon-"] {
            margin-right: 6px;
          }

          &>div:nth-of-type(1) {
            ::v-deep .el-icon-s-order {
              color: #f56c6c;
            }

            span {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 18px;
              color: #333333;
            }
          }

          &>div:nth-of-type(2) {
            margin-top: 30px;

            ::v-deep .el-icon-time {
              color: #999;
            }

            div {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
            }
          }

          &>div:nth-of-type(3),
          &>div:nth-of-type(4) {
            margin-top: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;

            &>div {
              display: flex;
              align-items: center;
              width: 50%;
            }
          }

          &>div:nth-of-type(5) {
            justify-content: center;
            margin-top: 43px;

            .begin_exam_btn {
              transition: 500ms ease all;
            }

            .begin_exam_btn:hover {
              transform: translateY(-5px);
            }
          }
        }
      }
    }

    .curriculum_center {
      .planNoData {
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        span {
          font-weight: 500;
          font-size: 12px;
          color: #bbbbbb;
          line-height: 48px;
        }
      }

      .curriculum_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        // grid-template-columns: 1fr 1fr 1fr 1fr;

        // grid-column-gap: 10px;
        // grid-row-gap: 13px;
        // justify-items: stretch;
        // align-items: start;
        .curriculum_item {
          margin-left: 10px;
          margin-top: 13px;
          width: 285px;
          background: #ffffff;
          box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.05);
          border-radius: 10px;
          cursor: pointer;

          &:hover img {
            transform: scale(1.1);
          }

          .coverImg {
            height: 154px;
            width: 100%;
            overflow: hidden;
            border-radius: 10px 10px 0 0;

            img {
              width: 100%;
              height: 100%;
              transition: 1000ms ease all;
            }
          }

          .item_info {
            font-family: Microsoft YaHei;
            font-weight: 400;
            padding: 15px 10px 12px 10px;

            &>span {
              font-size: 14px;
              color: #333333;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            &>div {
              font-size: 12px;
              color: #999999;
              margin-top: 8px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>